Liquid Glass - Structure 構建應用的結構

現在的 app 越來越講究沉浸式、內容導向，介面應在需要時提供良好的互動支援，而在不需要時儘量保持低干擾性（不打擾使用者，內容優先）

Depict relationships 描繪關係

Liquid Glass 定義了 UI 中的一個新功能層，它懸浮在內容之上，為介面提供結構感與清晰度，但不會分散使用者注意力。這種設計的一個關鍵表現方式是：清晰描繪介面之間的關係，讓它們在視覺上既具空間感，又不失根基。

舉例：操作面板Action Sheet。過去它總是從螢幕底部彈出。

現在不管你點的是哪裡，操作面板將從你實際點選的那個元素處彈出，那個元素就成了“源頭”，視覺上更具邏輯與空間一致性。

這種明確的介面角色定義有助於系統識別各元素之間的關係，從而使互動始終圍繞使用者點選的來源展開，保持一致的互動邏輯與焦點。這種做法讓介面元素之間的關係更有意義，使互動不再像突兀的彈窗，而更像是內容的自然延伸。

當使用者切換介面或進入下一層，Liquid Glass 會輕微變化，讓使用者知道“你現在往哪兒走了”。其實這套機制你早見過的視覺線索構建的，比如彈出面板（sheet）時的背景變暗，就是在提示使用者“現在是模態介面”。

A 當某個任務中斷了主流程，可以把 Liquid Glass 和背景變暗層（dimming layer）搭配使用，讓使用者把注意力集中在彈出的介面上，並讓這個介面顯得清晰、有明確目的。

B 而當任務是並行進行的（不打斷當前操作），Liquid Glass 則提供一種自然的視覺分隔，既保持資訊清晰，又不影響主流程的連續性。

C 當焦點轉移時（比如你將面板向上拖動），Liquid Glass 會微微退後、變得更不透明、尺寸略微擴大，提示你正在進入一個更深入、更專注的互動層級。

過去導航控制元件在靜止狀態下會融入背景。透過 Liquid Glass，控制元件被提亮，與內容區分更明顯，互動性更強。新系統不再依賴額外的背景色和邊框來提升視覺權重，而是透過佈局結構和內容分組來傳達層級感。

合理組織欄位（bar items），以增強介面的可讀性和空間清晰度。你只要用對 API 分組，系統就會自動給它們配好背景，佈局也不會亂。

要是分組效果不如預期，下面有幾個小建議能幫你調好：

A 工具欄內容擁擠時，可將次要功能放入"更多"選單，保持介面簡潔清晰。根據功能型別和使用頻率對欄位專案進行分組（高頻操作要靠前，邏輯相關項要放一起）。

B 執行相似或相關操作的按鈕，應該放在一起，構成清晰的操作組。

C 避免在同一欄位混用圖示和文字，比如把“Select”文字和分享圖示放在一起。這會讓使用者誤解它們是一個操作。

D 如果你確實需要使用文字按鈕，應該讓它們單獨佔一個區域或容器，避免視覺混淆。“完成Done”這種主要按鈕要單獨放，並加點顏色，像 iOS 上是藍色的勾，Mac 上就是醒目的字，使用者一眼就能看到。

E 標籤欄（tab bar）是你 app 中最持久存在的介面部分之一（常駐底部，引導使用者在主要功能區間切換）。當內容不在首頁明顯可見時，“搜尋”功能就變得尤為重要（它是發現內容的關鍵路徑）。所以現在 iOS 在底部加了個“搜尋”頁，讓你點起來更方便。

F 標籤欄現在還支援新增輔助檢視（accessory views），用來承載一些常駐功能，比如“音樂播放”這樣的功能，讓它一直在介面上出現。

G 如果你把來自不同層級的介面元素混在一起，會讓介面層級模糊，使用者就看不清哪些是一直在的，哪些是臨時出現的。（比如“結賬”按鈕）放到標籤欄中

視覺效果如何幫助你突出內容重點，並讓使用者操作保持清晰。

使用 Liquid Glass 的介面元素需要與內容保持清晰的分隔，以確保資訊的可讀性和層次感。就像現在的 Safari 一樣，控制元件是放在系統材質背景上方的，而不是直接壓在網頁內容上。如果沒有這種分隔，對比度就會下降，導致介面元素難以辨識，影響可讀性和操作清晰度。

Liquid Glass的滾動邊緣效果（Scroll edge effects）透過細膩的模糊處理來強化邊界感，取代生硬的分隔線，既減少視覺雜亂，又保持介面清晰可讀。

Scroll edge effects are not decorative 滾動邊緣效果不是裝飾

它們是功能性的視覺提示，其實是告訴你介面邊界在哪兒。它不會像蒙版一樣蓋住東西，只是輕輕模糊一下，幫你看清介面和內容的交界在哪，因此沒浮動按鈕時就別亂用。

當固定控制元件（pinned controls）覆蓋滾動檢視時，系統會自動顯示滾動邊緣效果，強化介面結構。

系統中有兩種滾動邊緣樣式：柔和（soft）和強烈（hard），適應不同平臺和介面需求。不要混用或疊加這兩種效果，這樣會造成視覺衝突，降低介面的一致性和清晰度。每個檢視只應用一種滾動邊緣效果，以避免層級混亂，確保介面一致性。

Soft 柔和模糊

預設樣式，在大多數場景下使用，特別適用於 iOS 和 iPadOS 上的浮動按鈕和輸入框等控制元件。它提供一種柔和的過渡效果，特別適合搭配 Liquid Glass 使用在按鈕、輸入框等互動元素上，既清晰又自然。

Hard 強模糊hard

主要用於 macOS 平臺，適配其更密集的資訊展示和更復雜的互動場景。這種效果形成更強、更不透明的邊界，特別適用於互動文字、無背景控制元件或需要突出顯示的表格標題欄等場景。

在 iPad 或 macOS 的分欄檢視（Split View）中，每個面板可以擁有各自的邊緣效果，但要保持高度一致，以維持對齊感和介面整潔。

這種“以內容為核心”的設計也延伸到了側邊欄（sidebars），現在側邊欄也能延伸到螢幕邊緣，整個介面看起來更沉浸、更一體化。

background extension effects 背景擴充套件效果

內容在視覺上穿過側邊欄，延展到整個螢幕寬度，同時保持視覺重心依然位於中間，確保排版平衡。

這種效果適用於主視覺圖（hero image）、色彩背景或其他需要表現“空間感”或“延展感”的區域。所有文字與互動控制元件都應置於該背景效果之上，以避免視覺扭曲或遮擋影響可讀性。

現在滾動檢視預設也會延伸到側邊欄下方，讓像輪播圖這樣的內容可以自然滑動穿過整個介面，提升瀏覽流暢度與探索感。你可以為每個檢視單獨設定背景延伸效果，這提供了極大的自由度，幫助你打造更豐富的介面佈局。

在這個示例中，頂部和底部區域啟用了背景延伸，而中間的滾動檢視則保持獨立未擴充套件，形成清晰的視覺層級與結構對比。